<script setup lang="ts">
  // list里的value对应取后端给的string，填入即可
  // navType为跳转方式需注意
  import { onShow, onUnload } from '@dcloudio/uni-app'
  import { ref, onMounted } from 'vue'
  import { getHomeStatistics } from '@/api/home/index'
  import { userStore } from '@/stores'
  import { usePermission } from '@/hooks/usePermission'
  import { getWarnConfig } from '@/api/dict/operate'
  import { useOrderNavigateTo } from '@/hooks/useListNavigate'

  const userInfoStore = userStore()
  const shortShow = ref(false)
  const operateShow = ref(false)
  const tabVlaue = ref('a')
  const tabVlaue2 = ref('a')
  const ShortorLong = (type: string) => {
    if (type == 'a') {
      // 短租
      shortShow.value = true
      tabVlaue.value = 'a'
    } else {
      shortShow.value = true
      tabVlaue.value = 'b'
    }
  }
  const OperateorDeposit = (type: string) => {
    operateShow.value = true
    tabVlaue2.value = type
  }
  //短租待办事项
  const shortOrder = ref([
    {
      name: '待排车辆',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'waitPlatoon',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '今日交车',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'giveToday',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '今日还车',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'returnToday',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '即将交车',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'giveSoon',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '明日交车',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'giveTomorrow',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '明日还车',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'returnTomorrow',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '车辆冲突',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'carRepeat',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '逾期未交',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'giveOverdue',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '逾期未还',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'returnOverdue',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '合同签署中(普通版)',
      name_fs: 'fs22', // 字号
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'ordinaryNum',
      permissioncard: 'svmsapp:order:short-order1',
    },
    {
      name: '合同签署中(付费版)',
      name_fs: 'fs22',
      num: 0,
      colorType: 1,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      url: '',
      value: 'signingNum',
      permissioncard: 'svmsapp:order:short-order1',
    },
  ])
  const czsOrder = ref([
    {
      name: '待排车辆',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'waitPlatoon',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '今日交车',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'giveToday',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '今日还车',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'returnToday',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '即将交车',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'giveSoon',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '明日交车',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'giveTomorrow',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '明日还车',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'returnTomorrow',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '车辆冲突',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'carRepeat',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '逾期未交',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'giveOverdue',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '逾期未还',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'returnOverdue',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '合同签署中(普通版)',
      name_fs: 'fs22',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'ordinaryNum',
      permissioncard: 'svmsapp:order:long-order1',
    },
    {
      name: '合同签署中(付费版)',
      name_fs: 'fs22',
      num: 0,
      colorType: 2,
      navType: 'navigateTo',
      permission: 'svmsapp:order:long-order',
      url: '',
      value: 'signingNum',
      permissioncard: 'svmsapp:order:long-order1',
    },
  ])
  const operate = ref([
    {
      name: '车辆油电量异常',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:caroilview',
      permissioncard: 'svmapp:1:operation:caroil',
      url: '/pages/operate/caroilmileage',
      value: 'carOilError',
      rulePermission: 'oilErrorStatus',
    },
    {
      name: '车辆里程异常',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:mileageview',
      permissioncard: 'svmapp:1:operation:mileage',
      url: '/pages/operate/carmileage',
      value: 'carMileageError',
      rulePermission: 'mileageErrorStatus',
    },
    {
      name: '待处理违章',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:car-violation',
      permissioncard: 'svmapp:1:operation:violationNotDeal',
      url: '/pages/asset/car-violation/list',
      value: 'violationNotDeal',
    },
    {
      name: '即将保养',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:imaintenanceWaitview',
      permissioncard: 'svmapp:1:operation:maintenanceWait',
      url: '/pages/operate/upmaintenance',
      value: 'maintenanceWait',
      rulePermission: 'maintenanceBeforeStatus',
    },
    {
      name: '即将年检',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:inspectionWaitview',
      permissioncard: 'svmapp:1:operation:inspectionWait',
      url: '/pages/operate/upyearannually',
      value: 'inspectionWait',
      rulePermission: 'inspectionBeforeStatus',
    },
    {
      name: '交强险即将到期',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:insureCompulsoryview',
      permissioncard: 'svmapp:1:operation:insureCompulsory',
      url: '/pages/operate/jqinsure',
      value: 'insureCompulsory',
      rulePermission: 'insureCompulsoryStatus',
    },
    {
      name: '商业险即将到期',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:insureBusinessview',
      permissioncard: 'svmapp:1:operation:insureBusiness',
      url: '/pages/operate/businessinsure',
      value: 'insureBusiness',
      rulePermission: 'insureBusinessStatus',
    },
    {
      name: 'GPS异常',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:abnormalview',
      permissioncard: 'svmapp:1:operation:abnormal',
      url: '/pages/operate/carabnormal',
      value: 'vehicleError',
      rulePermission: 'carVehicleErrorStatus',
    },
    {
      name: '车辆异动',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:movementview',
      permissioncard: 'svmapp:1:operation:movement',
      url: '/pages/operate/carabnormalmove',
      value: 'carAbnormalMovement',
      rulePermission: 'carAbnormalMoveStatus',
    },
    {
      name: '车辆多天未动',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:movedaysview',
      permissioncard: 'svmapp:1:operation:movedays',
      url: '/pages/operate/cardaysnomove',
      value: 'carUnmove',
      rulePermission: 'carUnmoveStatus',
    },
    {
      name: '车辆待巡检',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:inspectedview',
      permissioncard: 'svmapp:1:operation:inspected',
      url: '/pages/operate/carinspected',
      value: 'carView',
      rulePermission: 'carViewStatus',
    },
    {
      name: '驶出禁出围栏',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:electricFenceInview',
      permissioncard: 'svmapp:1:operation:electricFenceIn',
      url: '/pages/operate/outfence',
      value: 'electricFenceIn',
    },
    {
      name: '驶入禁入围栏',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmapp:1:operation:electricFenceOutview',
      permissioncard: 'svmapp:1:operation:electricFenceOut',
      url: '/pages/operate/comefence',
      value: 'electricFenceOut',
    },
    {
      name: '待维修车辆',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:car-repair',
      permissioncard: 'svmapp:1:operation:repairWait',
      url: '/pages/asset/car-repair/list',
      value: 'repairWait',
    },
    {
      name: '支出单审批待处理',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:operate-cost',
      permissioncard: 'svmapp:1:operation:costWaitProcessing',
      url: '/pages/operate-cost/list',
      value: 'costWaitProcessing',
      query: 'tag=1',
    },
    {
      name: '支出单等待付款',
      num: 0,
      colorType: 3,
      navType: 'navigateTo',
      permission: 'svmsapp:operate-cost',
      permissioncard: 'svmapp:1:operation:costWaitPay',
      url: '/pages/operate-cost/list',
      value: 'costWaitPay',
      query: 'tag=2',
    },
  ])
  const deposit = ref([
    {
      name: '押金未缴纳',
      num: 0,
      colorType: 4,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      permissioncard: 'svmapp:1:deposit.giveunpay',
      value: 'shortOrderGiveUnpay',
      rulePermission: 'depositOrderGiveUnpayStatus',
    },
    {
      name: '租车押金应退未退',
      num: 0,
      colorType: 4,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      permissioncard: 'svmapp:1:deposit.returnunrefund',
      value: 'shortOrderReturnUnrefund',
      rulePermission: 'depositOrderReturnUnrefundStatus',
    },
    {
      name: '违章押金应退未退',
      num: 0,
      colorType: 4,
      navType: 'navigateTo',
      permission: 'svmsapp:order:short-order',
      permissioncard: 'svmapp:1:deposit.violationunrefund',
      value: 'shortOrderViolationUnrefund',
      rulePermission: 'depositOrderViolationUnrefundStatus',
    },
    {
      name: '租车押金即将到期',
      num: 0,
      colorType: 4,
      navType: 'navigateTo',
      permissioncard: 'svmapp:1:deposit.carFreezeDue',
      tooltip: '暂不支持跳转押金',
      value: 'carFreezeDue',
      rulePermission: 'depositCarFreezeDueStatus',
    },
    {
      name: '违章押金即将到期',
      num: 0,
      colorType: 4,
      navType: 'navigateTo',
      permissioncard: 'svmapp:1:deposit.violationFreezeDue',
      tooltip: '暂不支持跳转押金',
      value: 'violationFreezeDue',
      rulePermission: 'depositViolationFreezeDueStatus',
    },
    {
      name: '唯一租车押金即将到期',
      name_fs: 'fs22', // 字号
      num: 0,
      colorType: 4,
      navType: 'navigateTo',
      permission: 'svmapp:1:deposit.memberFreezeDue.view',
      permissioncard: 'svmapp:1:deposit.memberFreezeDue',
      url: '/pages/index/memberFreezeList',
      value: 'memberFreezeDue',
      rulePermission: 'depositMemberFreezeDueStatus',
    },
  ])
  const operatearr = ref([])
  // 押金待办数组
  const depositarr = ref([])
  const siteIdnum = ref('')
  const siteName = ref('')
  const getNums = async (siteId: string, name: string) => {
    siteIdnum.value = siteId ? siteId : ''
    siteName.value = siteId ? name : ''
    const res1: any = await getHomeStatistics({ siteId: siteId })
    const res2: any = await getWarnConfig({})
    //短租权限
    shortOrder.value = shortOrder.value.filter((i) => {
      if (userStore().v_auth(i.permissioncard)) {
        i.num = res1.result.shortOrder[i.value] || 0
        return i
      }
    })
    //长租权限
    czsOrder.value = czsOrder.value.filter((i) => {
      if (userStore().v_auth(i.permissioncard)) {
        i.num = res1.result.czsOrder[i.value] || 0
        return i
      }
    })
    // 待办事项
    operate.value.forEach((i) => {
      i.num = res1.result.operate[i.value] || 0
      i.siteId = siteId
    })
    operatearr.value = operate.value.filter((item) => {
      item.ruleStatus = res2.result[item.rulePermission] == undefined ? true : res2.result[item.rulePermission] == 1 ? true : false
      if (userStore().v_auth(item.permissioncard) && item.ruleStatus) {
        return item
      }
    })
    operatearr.value = operatearr.value.length > 5 ? operatearr.value.slice(0, 5).concat({ name: 'more' }) : operatearr.value
    // 押金待办事项
    deposit.value.forEach((i) => {
      if (`${i.value}` in res1.result.deposit) {
        i.num = res1.result.deposit[i.value] || 0
      }
    })
    depositarr.value = deposit.value.filter((item) => {
      item.ruleStatus = res2.result[item.rulePermission] == undefined ? true : res2.result[item.rulePermission] == 1 ? true : false
      if (userStore().v_auth(item.permissioncard) && item.ruleStatus) {
        return item
      }
    })
    if (czsOrder.value.length > 0 && shortOrder.value.length == 0) {
      tabVlaue.value = 'b'
    }
    if (depositarr.value.length > 0 && operatearr.value.length == 0) {
      tabVlaue2.value = 'b'
    }
  }
  const toTool = (item: any) => {
    if (siteIdnum.value) {
      uni.navigateTo({ url: '/pages/index/operates?siteId=' + siteIdnum.value + '&siteName=' + siteName.value })
    } else {
      uni.navigateTo({ url: '/pages/index/operates' })
    }
  }
  // 更新短租 param
  const getUpdateParam = (filterName: any) => {
    let orderStatus = undefined
    let orderLabels: string[] = []
    if (filterName == '待排车辆') orderStatus = 10
    if (filterName == '即将交车') orderLabels = ['即将交车']
    if (filterName == '今日交车') orderLabels = ['今日交车']
    if (filterName == '今日还车') orderLabels = ['今日还车']
    if (filterName == '逾期未交') orderLabels = ['逾期未交']
    if (filterName == '逾期未还') orderLabels = ['逾期未还']
    if (filterName == '明日交车') orderLabels = ['明日交车']
    if (filterName == '明日还车') orderLabels = ['明日还车']
    if (filterName == '车辆冲突') orderLabels = ['车辆冲突']
    if (filterName == '合同签署中(普通版)') orderLabels = ['合同签署中(普通版)']
    if (filterName == '合同签署中(付费版)') orderLabels = ['合同签署中(付费版)']
    if (filterName == '押金未缴纳') orderLabels = ['押金未缴纳']
    if (filterName == '租车押金应退未退') orderLabels = ['租车押金应退未退']
    if (filterName == '违章押金应退未退') orderLabels = ['违章押金应退未退']
    return { orderStatus, orderLabels }
  }
  const tomatter = (item: any) => {
    //短租
    if (item.colorType == 1) {
      if (userStore().v_auth(item.permission)) {
        let param = getUpdateParam(item.name)
        useOrderNavigateTo(
          {
            ...param,
            siteId: siteIdnum.value,
            siteName: siteName.value,
          },
          'short-order',
        )
      } else {
        uni.showToast({
          title: '暂无查看权限',
          icon: 'none',
        })
      }
    }

    //长租
    if (item.colorType == 2) {
      if (userStore().v_auth(item.permission)) {
        let param = getUpdateParam(item.name)
        useOrderNavigateTo(
          {
            ...param,
            siteId: siteIdnum.value,
            siteName: siteName.value,
          },
          'long-order',
        )
      } else {
        uni.showToast({
          title: '暂无查看权限',
          icon: 'none',
        })
      }
    }
    //待办事项
    if (item.colorType == 3) {
      if (userStore().v_auth(item.permission)) {
        if (item.value === 'violationNotDeal') {
          if (siteIdnum.value) {
            uni.navigateTo({ url: item.url + '?eventStatus=0&siteId=' + siteIdnum.value + '&siteName=' + siteName.value })
          } else {
            uni.navigateTo({ url: item.url + '?eventStatus=0' })
          }
        } else if (item.value === 'repairWait') {
          if (siteIdnum.value) {
            uni.navigateTo({ url: item.url + '?status=待维修' + '&siteId=' + siteIdnum.value + '&siteName=' + siteName.value })
          } else {
            uni.navigateTo({ url: item.url + '?status=待维修' })
          }
        } else {
          // 选择门店带入门店参数
          if (siteIdnum.value) {
            const selfQuery = item.query ? `&${item.query}` : ''
            uni.navigateTo({ url: item.url + '?siteId=' + siteIdnum.value + '&siteName=' + siteName.value + selfQuery })
          } else {
            const selfQuery = item.query ? `?${item.query}` : ''
            uni.navigateTo({ url: item.url + selfQuery })
          }
        }
      } else {
        uni.showToast({
          title: '暂无查看权限',
          icon: 'none',
        })
      }
    }
    // 押金待办
    if (item.colorType == 4) {
      if (item.tooltip) {
        uni.showToast({ title: item.tooltip, icon: 'none' })
      } else if (userStore().v_auth(item.permission)) {
        if (['shortOrderGiveUnpay', 'shortOrderReturnUnrefund', 'shortOrderViolationUnrefund'].includes(item.value)) {
          let param = getUpdateParam(item.name)
          useOrderNavigateTo(
            {
              ...param,
              siteId: siteIdnum.value,
              siteName: siteName.value,
            },
            'short-order',
          )
        }
        if (['memberFreezeDue'].includes(item.value)) {
          uni.navigateTo({ url: item.url })
        }
      } else {
        uni.showToast({ title: '暂无查看权限', icon: 'none' })
      }
    }
  }
  onMounted(() => {
    shortShow.value = false
    operateShow.value = false
    tabVlaue.value = 'a'
    tabVlaue2.value = 'a'
  })
  onUnload(() => {
    shortShow.value = false
    operateShow.value = false
    tabVlaue.value = 'a'
    tabVlaue2.value = 'a'
  })
  // onShow(() => {
  //   shortShow.value = false
  //   tabVlaue.value = 'a'
  // })
  defineExpose({
    getNums,
  })
</script>

<template>
  <view class="need">
    <view class="n_todo" v-if="shortOrder?.length > 0 || czsOrder?.length > 0">
      <!-- 短租和长租都有权限时 -->
      <block v-if="shortOrder?.length > 0 && czsOrder?.length > 0">
        <!-- 顶部内容 -->
        <view class="text-top">
          <view class="left" @click="ShortorLong('a')">
            <image v-if="tabVlaue == 'a'" src="../../../static/images/home_icon_1.png" mode="widthFix" />
            <image v-else src="../../../static/images/home_icon_001.png" mode="widthFix" />
            <view :class="[tabVlaue == 'a' ? 'fw600 c6' : 'fw400 c7']">短租待办事项</view>
          </view>
          <view class="right" @click="ShortorLong('b')">
            <image v-if="tabVlaue == 'b'" src="../../../static/images/home_icon_01.png" mode="widthFix" />
            <image v-else src="../../../static/images/home_icon_001.png" mode="widthFix" />
            <view :class="[tabVlaue == 'b' ? 'fw600 c6' : 'fw400 c7']">长租待办事项</view>
          </view>
        </view>
        <!-- 切换本部分 -->
        <view :class="['tab', shortShow ? (tabVlaue == 'a' ? 'to_left' : 'to_right') : '']"></view>
      </block>
      <block v-if="shortOrder?.length > 0 && czsOrder.length == 0">
        <view class="text-top">
          <view class="left">
            <image src="../../../static/images/home_icon_1.png" mode="widthFix" />
            <view class="fw600 c6">短租待办事项</view>
          </view>
          <view class="right"></view>
        </view>
        <view class="tab-all"></view>
      </block>
      <block v-if="czsOrder?.length > 0 && shortOrder.length == 0">
        <view class="text-top">
          <view class="left">
            <image src="../../../static/images/home_icon_01.png" mode="widthFix" />
            <view class="fw600 c6">长租待办事项</view>
          </view>
          <view class="right"></view>
        </view>
        <view class="tab-all"></view>
      </block>
      <!-- 灰色tab底部 -->
      <view class="tab-bottom"></view>
      <!-- 内容白板 -->
      <view class="n-todo-content">
        <view v-if="tabVlaue == 'a'" class="need-nums operateneed-nums">
          <template v-for="(item, index) in shortOrder" :key="index">
            <view class="num" @click="tomatter(item)">
              <span class="c2 nowrap" :class="[item.name_fs || 'fs24']">{{ item.name }}</span>
              <span class="fs40 fw700 mt12 font-din" style="color: #407fff">{{ item.num }}</span>
              <view class="num-line" v-if="index != 2"></view>
            </view>
          </template>
        </view>
        <view v-if="tabVlaue == 'b'" class="need-nums operateneed-nums">
          <template v-for="(item, index) in czsOrder" :key="index">
            <view class="num" @click="tomatter(item)">
              <span class="c2 nowrap" :class="[item.name_fs || 'fs24']">{{ item.name }}</span>
              <span class="fs40 fw700 mt12 font-din" style="color: #846bce">{{ item.num }}</span>
              <view class="num-line" v-if="index != 2"></view>
            </view>
          </template>
        </view>
      </view>
    </view>

    <!-- 运维待办与押金待办 -->
    <view class="n_todo" style="height: 330rpx" v-if="operatearr?.length > 0 || depositarr?.length > 0">
      <!-- 运维和押金都有权限时 -->
      <block v-if="operatearr?.length > 0 && depositarr?.length > 0">
        <!-- 顶部内容 -->
        <view class="text-top">
          <view class="left" @click="OperateorDeposit('a')">
            <image v-if="tabVlaue2 == 'a'" src="../../../static/images/home_icon_2.png" mode="widthFix" />
            <image v-else src="../../../static/images/home_icon_2_gray.png" mode="widthFix" />
            <view :class="[tabVlaue2 == 'a' ? 'fw600 c6' : 'fw400 c7']">运维待办事项</view>
          </view>
          <view class="right" @click="OperateorDeposit('b')">
            <image v-if="tabVlaue2 == 'b'" src="../../../static/images/home_icon_5.png" mode="widthFix" />
            <image v-else src="../../../static/images/home_icon_5_gray.png" mode="widthFix" />
            <view :class="[tabVlaue2 == 'b' ? 'fw600 c6' : 'fw400 c7']">押金待办事项</view>
          </view>
        </view>
        <!-- 切换本部分 -->
        <view :class="['tab', operateShow ? (tabVlaue2 == 'a' ? 'to_left' : 'to_right') : '']"></view>
      </block>
      <block v-if="operatearr?.length > 0 && depositarr.length == 0">
        <view class="text-top">
          <view class="left">
            <image src="../../../static/images/home_icon_2.png" mode="widthFix" />
            <view class="fw600 c6">运维待办事项</view>
          </view>
          <view class="right"></view>
        </view>
        <view class="tab-all"></view>
      </block>
      <block v-if="depositarr?.length > 0 && operatearr.length == 0">
        <view class="text-top">
          <view class="left">
            <image src="../../../static/images/home_icon_5.png" mode="widthFix" />
            <view class="fw600 c6">押金待办事项</view>
          </view>
          <view class="right"></view>
        </view>
        <view class="tab-all"></view>
      </block>
      <!-- 灰色tab底部 -->
      <view class="tab-bottom"></view>
      <!-- 内容白板 -->
      <view class="n-todo-content" style="height: 330rpx">
        <view v-if="tabVlaue2 == 'a'" class="need-nums operateneed-nums">
          <template v-for="(item, index) in operatearr" :key="index">
            <view class="num" @click="tomatter(item)" v-if="item.name != 'more'">
              <span class="c2 nowrap" :class="[item.name_fs || 'fs24']">{{ item.name }}</span>
              <span class="fs40 fw700 mt12 font-din" style="color: #ff9f21">{{ item.num }}</span>
              <view class="num-line" v-if="index != 2"></view>
            </view>
            <ve-button type="link" class="more" @click="toTool" v-if="item.name == 'more'"
              >查看全部 <ve-icon name="arrow_right_1" size="32" style="margin-left: 4rpx" />
            </ve-button>
          </template>
        </view>
        <view v-if="tabVlaue2 == 'b'" class="need-nums operateneed-nums">
          <template v-for="(item, index) in depositarr" :key="index">
            <view class="num" @click="tomatter(item)" v-if="item.name != 'more'">
              <span class="c2 nowrap" :class="[item.name_fs || 'fs24']">{{ item.name }}</span>
              <span class="fs40 fw700 mt12 font-din" style="color: #45b753">{{ item.num }}</span>
              <view class="num-line" v-if="index != 2"></view>
            </view>
          </template>
        </view>
      </view>
    </view>

    <!-- <view class="n-card" v-if="operatearr.length > 0">
      <view class="n-card-top">
        <view class="left">
          <image src="../../../static/images/home_icon_2.png" mode="widthFix" />
          <view class="fw600">运维待办事项</view>
        </view>
        <view class="right" v-if="operatearr.length > 0" @click="toTool">
          <span class="fs28 c2">全部</span>
          <image src="../../../static/icons/icon-more.png" mode="widthFix" />
        </view>
      </view>
      <view v-if="operatearr.length > 0" class="need-nums operateneed-nums">
        <template v-for="(item, index) in operatearr" :key="index">
          <view v-if="item.colorType == 3" class="num" @click="tomatter(item)">
            <span class="c2 nowrap" :class="[item.name_fs || 'fs24']">{{ item.name }}</span>
            <span class="fs40 fw700 mt12 font-din" style="color: #ff9f21">{{ item.num }}</span>
            <view class="num-line" v-if="index != 2"></view>
          </view>
        </template>
      </view>
    </view> -->
  </view>
</template>

<style lang="scss">
  .nowrap {
    white-space: nowrap;
  }
  .n_todo {
    width: calc(100% - 48rpx);
    height: 580rpx;
    margin: 24rpx 24rpx 0;
    border-radius: 8rpx;
    overflow: hidden;
    position: relative;
  }
  .tab-bottom {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 12rpx;
    width: 100%;
    height: 60rpx;
    background: #e8edf4;
    border-radius: 8rpx 8rpx 0 0;
  }
  .n-todo-content {
    width: 100%;
    height: 580rpx;
    background: #fff;
    position: absolute;
    border-radius: 8rpx;
    left: 0;
    top: 12rpx;
    z-index: 1;
    box-shadow: 0 8rpx 20rpx 0 rgba(128, 128, 128, 0.05);
    .need-nums {
      width: calc(100% - 40rpx);
      margin: 80rpx 20rpx 0;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      background: #ffffff;
      flex-wrap: wrap;
      .num {
        display: flex;
        flex-direction: column;
        height: 120rpx;
        align-items: center;
        width: 33.33%;
        position: relative;
        span:nth-child(1) {
          width: 190rpx;
          text-align: left;
        }
        span:nth-child(2) {
          width: 190rpx;
          text-align: left;
        }
      }
      .more {
        font-weight: 400;
        font-size: 28rpx;
        padding: 0;
      }
      .num-line {
        position: absolute;
        top: 2rpx;
        right: 0;
        width: 2rpx;
        height: 76rpx;
        background: rgba(211, 215, 228, 0.3);
        transform: scaleX(0.5);
      }
    }
    .operateneed-nums {
      .mt25 {
        margin-top: 12rpx;
      }
      .num-line {
        height: 84rpx;
      }
    }
  }
  .tab-all {
    z-index: 3;
    position: absolute;
    left: 0;
    top: -18rpx;
    width: 100%;
    height: 94rpx;
    background: #ffffff;
  }
  .tab {
    z-index: 3;
    position: absolute;
    left: 0;
    top: -18rpx;
    width: 50%;
    height: 94rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0 0;
    /* 设置变形原点 */
    transform-origin: center left;
    /* 景深 150px 旋转 30deg */
    transform: perspective(150px) rotateX(30deg);
    -ms-transform: perspective(150px) rotateX(30deg);
    -moz-transform: perspective(150px) rotateX(30deg);
    -webkit-transform: perspective(150px) rotateX(30deg);
    -o-transform: perspective(150px) rotateX(30deg);
  }
  .to_left {
    animation: to-left 0.5s ease-in-out forwards;
  }
  .to_right {
    animation: to-right 0.5s ease-in-out forwards;
  }
  @keyframes to-right {
    0% {
      left: 0;
      transform-origin: center left;
      transform: perspective(150px) rotateX(30deg);
    }

    100% {
      left: 50%;
      transform-origin: center right;
      transform: perspective(150px) rotateX(30deg);
    }
  }
  @keyframes to-left {
    0% {
      left: 50%;
      transform-origin: center right;
      transform: perspective(150px) rotateX(30deg);
    }

    100% {
      left: 0;
      transform-origin: center left;
      transform: perspective(150px) rotateX(30deg);
    }
  }
  .tab::before {
    content: '';
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    bottom: 0;
    left: -20rpx;
    /* 设置径向渐变 */
    background: radial-gradient(circle at 0 0, transparent 20rpx, #ffffff 20rpx);
  }
  .tab::after {
    content: '';
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    bottom: 0;
    right: -20rpx;
    /* 设置径向渐变 */
    background: radial-gradient(circle at 20rpx 0, transparent 20rpx, #ffffff 20rpx);
  }
  .text-top {
    z-index: 6;
    width: 100%;
    position: absolute;
    top: 20rpx;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      width: 50%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
        margin: 0 16rpx 0 24rpx;
      }
    }
    .right {
      width: 50%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
        margin: 0 16rpx 0 48rpx;
      }
    }
  }
  .center {
    align-items: center;
    justify-content: center;
  }
  .mt12 {
    margin-top: 12rpx;
  }
  .mt20 {
    margin-top: 20rpx;
  }
  // 字体
  .font-din {
    // font-family: iconfontnum;
  }
  .n-card {
    margin: 16rpx 24rpx 0;
    background-color: #ffffff;
    box-shadow: 0 8rpx 20rpx 0 rgba(128, 128, 128, 0.05);
    border-radius: 8rpx;
    .n-card-top {
      padding: 28rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        image {
          margin-left: 16rpx;
          width: 10rpx;
        }
      }
    }
    .need-nums {
      width: calc(100% - 40rpx);
      margin: 4rpx 20rpx 0;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      background: #ffffff;
      flex-wrap: wrap;
      .num {
        display: flex;
        flex-direction: column;
        height: 120rpx;
        align-items: center;
        width: 33.33%;
        position: relative;
        span:nth-child(1) {
          width: 190rpx;
          text-align: left;
        }
        span:nth-child(2) {
          width: 190rpx;
          text-align: left;
        }
      }
      .num-line {
        position: absolute;
        top: 2rpx;
        right: 0;
        width: 2rpx;
        height: 76rpx;
        background: rgba(211, 215, 228, 0.3);
        transform: scaleX(0.5);
      }
    }
    .operateneed-nums {
      .mt25 {
        margin-top: 12rpx;
      }
      .num-line {
        height: 84rpx;
      }
    }
  }
</style>
